<template>
  <div class="attendance-punch">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <div class="user-name">张三</div>
        <div class="user-date">2024-05-21</div>
      </div>
      
      <!-- 打卡记录 -->
      <div class="punch-records">
        <div class="record-item">
          <div class="status">登到</div>
          <div class="time">打卡时间：08:35:56</div>
          <div class="status-tag">已打卡</div>
        </div>
        <div class="record-item">
          <div class="status">签退</div>
          <div class="time">打卡时间：17:35:56</div>
          <div class="status-tag">已打卡</div>
        </div>
      </div>
    </div>

    <!-- 打卡按钮 -->
    <div class="punch-button-wrapper">
      <van-button 
        round 
        type="primary" 
        class="punch-button"
        @click="handlePunch"
      >
        更新打卡
        <div class="current-time">18:35:56</div>
      </van-button>
    </div>

    <!-- 位置信息 -->
    <div class="location">
      中国广东��广州市天河区漫乐街中国广东省广州市天河区漫乐街
    </div>
  </div>
</template>

<script>
export default {
  name: 'AttendancePunch',
  data() {
    return {
      currentTime: null,
      timer: null
    }
  },
  methods: {
    handlePunch() {
      // 处理打卡逻辑
      this.$toast('打卡成功')
    },
    updateTime() {
      const now = new Date()
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      this.currentTime = `${hours}:${minutes}:${seconds}`
    }
  },
  mounted() {
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.attendance-punch {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.user-info {
  margin-bottom: 20px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.user-date {
  color: #666;
  font-size: 14px;
}

.punch-records {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status {
  font-weight: bold;
}

.time {
  color: #666;
  flex-grow: 1;
}

.status-tag {
  color: #4CAF50;
}

.punch-button-wrapper {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.punch-button {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #4CAF50 !important;
  border: none;
}

.current-time {
  font-size: 14px;
  margin-top: 5px;
}

.location {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 0 20px;
}
</style> 